<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div id="app">
    <div class="container">
        <el-row>
            <el-col :span="6" class="userInfo">
                <ul style="padding-top: 60px">
                    <li >
                        <a href="userInfo.html">
                            <div class="userInfo-content">
                                <i class=" glyphicon glyphicon-copy"></i>
                            </div>
                            <span>基础设置</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="updatePassword.html">
                            <div class="userInfo-content">
                                <i class="el-icon-edit"></i>
                            </div>
                            <span>修改密码</span>
                        </a>
                    </li>
                    <li>
                        <a href="account.html">
                            <div class="userInfo-content">
                                <i class="el-icon-edit"></i>
                            </div>
                            <span>个人账户</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="userInfo-content">
                                <i class="el-icon-edit"></i>
                            </div>
                            <span>系统设置</span>
                        </a>
                    </li>
                </ul>
            </el-col>
            <el-col :span="16" class="information">
                <el-form :model="form" label-width="80px">
                    <el-form-item label="原密码:">
                        <el-input v-model="form.password"> </el-input>
                    </el-form-item>
                    <el-form-item label="新密码:">
                        <el-input v-model="form.newPassword"> </el-input>
                    </el-form-item>
                    <el-form-item label="确认密码:">
                        <el-input v-model="form.newPasswordAgain"> </el-input>
                    </el-form-item>
                    <el-button @click="modPassword" type="primary" size="large">修改</el-button>
                </el-form>
            </el-col>
        </el-row>
    </div>

</div>

<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/vue-v2.6.11.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/common.js"></script>
<script src="../js/apiurls.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            form: {
                password: '',
                newPassword: '',
                newPasswordAgain: '',
            },
        },
        methods: {
            modPassword() {
                let that = this
                let data = {
                    "newPassword": that.form.newPassword,
                    "newPasswordAgain": that.form.newPasswordAgain,
                    "password": that.form.password
                }
                getPostData(apiUrls.login_user.changePassword, data, 'post', function (data) {
                    if (data.msg === 'success') {
                        that.$message({
                            message: "修改成功",
                            type: 'success'
                        });
                    } else {
                        that.$message({
                            message: data.msg,
                            type: 'error'
                        });
                    }
                })
            }
        }
    })
</script>
</body>
</html>